<template>
    <div class="record">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
            <van-cell-group  v-for="(item,index) in list" :key="index" inset>
                <p v-show="false">{{item}}</p>
                <div class="card">
                    <div><i class="iconfont icon-shijian"></i>:{{item.printingDate}}  {{item.clockTimeIn}}</div>
                    <div><i class="iconfont icon-weizhi"></i>:{{item.locationPunchIn}}</div>
                    <div><i class="iconfont icon-xiangmu"></i>:{{item.projectName}}</div>
                </div>
            </van-cell-group>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
import {selectRecord} from '../../api/mine'

import Vue from 'vue';
import { NavBar } from 'vant';
Vue.use(NavBar);
import { PullRefresh } from 'vant';
Vue.use(PullRefresh);
    export default{
        data(){
           return{
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            user:JSON.parse(localStorage.getItem('phones')),
           }
        },
        created(){
            this.getCardList()
        },
        methods:{
            getCardList(){
                selectRecord({userId:this.user.userId}).then(res=>{
                    this.list = res.data.data
                })
            },
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing == true) {
                        this.refreshing = false;
                    }
                        
                    for (let i = this.list.length; i < this.list.length; i++) {
                        this.list.push(this.list.length);
                    }
                        this.loading = false;
                    if (this.list.length >= this.list.length) {
                        this.finished = true;
                    }
                }, 1000);
            },
                onRefresh() {
                // 清空列表数据
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
                },
        }
    }
</script>
<style lang="scss" scoped>
    .van-list{
        .card{
            width: 90%;
            height: 120px;
            border: 1px solid #3FAC9D;
            border-radius: 20px;
            margin-top: 20px;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .iconfont{
                font-size: 25px;
            }
            div{
                font-size: 25px;
                font-weight: 600;
                padding: 5px;
                margin-left: 30px;
            }
        }
    }
</style>